<template>
	<view class="upload-viedo-container">
		<!-- 顶部视频标题 -->
		<view class="top-video-title-bar">
			<view class="img-box" @tap='fileUpload'>
				<view class="upload-title" v-if="!src">上传视频</view>
				<image v-if="!src" src="/static/images/icon-images/upload.png" mode=""></image>
				<video :controls="false" objectFit="contain" v-else :src="src"></video>
			</view>
			<view class="right-title">
				<!-- <uni-easyinput class="title-input"  v-model="title" placeholder="请输入视频标题" /> -->
				<input class="title-input" type="text" v-model="uploadQuery.title" placeholder="请输入视频标题" />
				<view class="line"></view>
				<textarea class="content" v-model.trim="uploadQuery.describe" placeholder="请输入视频描述" maxlength="30" />

			</view>
			<!-- <view class="count">0/20</view> -->
		</view>
		<!-- 顶部视频标题 -->
		<!-- 条件区域 -->
		<view class="upload-video-class">
			<view class="video-class-one">
				<image class="icon1" src="/static/images/icon-images/class1.png" mode=""></image>
				<view class="tip">分类</view>
			</view>
			<view class="class-tab-box">
				<view :class="['class-tab-item', active == i ? 'active' : '']" v-for="(item, i) in tabList" :key="i"
					@tap="tabChange(i, item.id)">
					{{item.name || ''}}
				</view>
			</view>
			<view class="video-class-one">
				<image class="icon1" src="/static/images/icon-images/class2.png" mode=""></image>
				<view class="img-box" @tap='pickerChange'>
					<view>{{collection}}</view>
					<image class="more-img" src="/static/images/icon-images/more.png" mode=""></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="video-class-two">
				<view class="left-icon">
					<image class="icon1" src="/static/images/icon-images/class3.png" mode=""></image>
					<view class="tip">设置封面</view>
				</view>
				<view class="img-box" @tap='settingsFengmian'>
					<image v-if="!uploadQuery.cover_url" src="/static/images/icon-images/upload.png" mode="widthFix">
					</image>
					<image class="uploaded-img" v-else :src="uploadQuery.cover_url" mode="widthFix"></image>
				</view>
			</view>
			<view class="line"></view>
			<template>
				<view class="video-class-one price-setting">
					<image class="icon1" src="/static/images/icon-images/class4.png" mode=""></image>
					<view class="tip">请设置价格</view>
				</view>
				<view class="price-setting-box">
					<view class="price-item" v-for="(item,i) in priceSetList" :key="i" @tap='priceChange(item)'>
						{{item.money}}
					</view>
					<input class="price" v-model="price" type="number" placeholder="输入金额" />
				</view>

			</template>
		</view>
		<!-- 条件区域 -->
		<view class="confirm-btn" @tap='videoUpload'>
			发布
		</view>

		<uni-popup ref="popup_chat" type="bottom">
			<view class="title-wrap" v-if="popState == '1'">
				<view class="">
					<uni-easyinput v-model="collectionQuery.title" placeholder="请输入合集标题" />
					<view class="fengmian-name">上传合集封面</view>
					<image class="default-img" v-if="!collectionUrl" src="/static/images/icon-images/upload.png" mode=""
						@tap="uploadImage"></image>
					<image class="collection-img" v-else :src="collectionUrl" mode=""></image>
				</view>
				<view class="confirm-btn" @tap='collectionConfirm'>
					提交
				</view>
			</view>
			<view class="collection-list" v-else>
				<view class="title-box">
					<view class="line"></view>
					<view class="count">视频合集({{collectionTotal}})</view>
				</view>
				<scroll-view scroll-y="true" style="width: 100%;height: 800rpx;">
					<view class="collection-group">
						<view class="collection-item upload-item" @tap='createGroup'>
							<image src="/static/images/icon-images/upload.png" mode=""></image>
						</view>
						<view class="collection-item" v-for="(item, i) in collectionList"
							@tap='collectSelect(item.id, item.title)' :key="i">
							<view class="left-video">
								<!-- <video src="" objectFit="fill"></video> -->
								<image :src="item.img" mode="heightFix"></image>
								<!-- <view class="num">20个视频</view> -->
							</view>
							<view class="right-content">
								<view class="tip">{{item.title || 0}}</view>
								<!-- <view class="test">这里是课程合集的简介，限制次数，简单介绍</view> -->
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				tabList: [],
				priceSetList: [{
						price: 0,
						money: '0元'
					}, {
						price: 10,
						money: '10元'
					},
					{
						price: 50,
						money: '50元'
					},
					{
						price: 100,
						money: '100元'
					}
				],
				price: '',
				// 发布视频参数
				uploadQuery: {
					title: '',
					describe: '',
					classify: '',
					price: 0,
					is_try: 1, // 0试播 1
					group: '',
					cover_url: '' // 封面
				},
				// 视频列表参数
				videoQuery: {
					classify: '',
					offset: 1,
					limit: 5
				},
				collectionList: [], // 合集列表
				collection: '添加到合集',
				collectionSelect: ['添加到合集', '创建合集'],
				src: '',
				popState: '',
				collectionQuery: {
					title: ''
				},
				// 上传的合集图片
				collectionUrl: '',
				collectionTotal: 0,
				state: ''
			};
		},
		watch: {},
		onLoad({query, state}) {
			this.state = state
			if (state == 'edit') {
				this.uploadQuery = JSON.parse(query)
				// this.src = this.uploadQuery.video_url
				console.log(this.uploadQuery)
				this.price = this.uploadQuery.price
				this.getVideo(this.uploadQuery.id)
				
			}
			this.getVideoList()
			this.getCollection()
		},
		methods: {
			async getVideo(id) {
				const res = await this.$http.request('/api/v1/shop/show', {
					id
				}, 'GET')
				if (res.code == 200) {
					this.src = res.data.video_url
				}
			},
			createGroup() {
				this.popState = '1'
			},
			// 分类状态栏切换
			tabChange(i, id) {
				this.active = i
				this.uploadQuery.classify = id
			},
			priceChange(item) {
				this.price = item.price
				this.uploadQuery.price = item.price
			},
			pickerChange() {
				// console.log(e.detail.value)
				// this.popState = e.detail.value
				// 如果是添加到合集
				this.$refs.popup_chat.open()
			},
			collectSelect(id, title) {
				console.log('合集id=>', id)
				this.uploadQuery.group = id
				this.collection = title
				this.$refs.popup_chat.close()
			},
			// 创建合集
			collectionConfirm() {
				if (!this.collectionQuery.title) {
					return uni.$toast('合集标题不能为空')
				}
				if (!this.collectionUrl) {
					return uni.$toast('请上传合集图片')
				}
				uni.showLoading({
					title: '请稍后'
				})

				uni.uploadFile({
					url: `${this.$http.getHost()}/api/v1/author/add_group`, //仅为示例，非真实的接口地址
					filePath: this.collectionUrl,
					header: {
						'X-Api-Key': uni.getStorageSync('acess_token'),
						"Content-Type": "multipart/form-data"
					},
					name: 'file',
					formData: this.collectionQuery,
					success: (uploadFileRes) => {
						uni.$toast('合集创建成功')
						// this.$refs.popup_chat.close()
						this.collectionQuery.title = ''
						this.collectionUrl = ''
						this.getCollection()
						this.popState = ''
					},
					fail() {
						uni.$toast('合集创建失败')
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			// 发布合集封面
			uploadImage() {
				uni.showLoading({
					title: '请稍后'
				})
				uni.chooseImage({
					count: 1,
					sourceType: ['camera', 'album'],
					success: chooseImageRes => {
						this.collectionUrl = chooseImageRes.tempFilePaths[0];

					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			switch1Change(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
				if (e.target.value) {
					this.uploadQuery.is_try = 0
				} else {
					this.uploadQuery.is_try = 1
				}
			},
			// 获取其他视频列表
			async getVideoList() {
				const res = await this.$http.request('/api/v1/shop', this.videoQuery, 'GET')
				if (res.code == 200) {
					this.tabList = res.data.classify
					if (this.state == 'edit') {
						this.active = this.tabList.findIndex(item => item.id == this.uploadQuery.classify)
					} else {
						this.uploadQuery.classify = this.tabList[0].id
					}
				}
			},
			// 获取合集列表
			async getCollection() {
				const res = await this.$http.request('/api/v1/author/group', {
					member_id: uni.getStorageSync('userID')
				}, 'GET')
				if (res.code == 200) {
					this.collectionList = res.data
					this.collectionTotal = res.data.length || 0
					if (this.state == 'edit') {
						const index = res.data.findIndex(item => item.id == this.uploadQuery.group)
						this.collection = res.data[index].title
					}
				}
			},
			// 上传
			fileUpload() {
				uni.showLoading({
					title: '请稍后'
				})
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					compressed: true,
					success: res => {
						this.src = res.tempFilePath;
						console.log(res)
						// this.uploadQuery.file = res

					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			// 设置封面
			settingsFengmian() {
				uni.showLoading({
					title: '请稍后'
				})
				uni.chooseImage({
					count: 1,
					sourceType: ['camera', 'album'],
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: `${this.$http.getHost()}/api/v1/file/images`, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							header: {
								'X-Api-Key': uni.getStorageSync('acess_token'),
								"Content-Type": "multipart/form-data"
							},
							fileType: 'image',
							timeout: 3600000,
							name: 'file',
							formData: {

							},
							success: (uploadFileRes) => {
								const result = JSON.parse(uploadFileRes.data)
								console.log(result.data.url);
								this.uploadQuery.cover_url = result.data.url
								console.log(this.uploadQuery.cover_url);
								uni.$toast('封面设置成功')
							}
						});
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			// 发布视频
			videoUpload() {
				this.uploadQuery.price = this.price
				// console.log(this.uploadQuery)
				if (!this.uploadQuery.title) {
					uni.$toast('视频标题不能为空')
					return
				}
				if (!this.uploadQuery.describe) {
					uni.$toast('视频描述不能为空')
					return
				}
				if (!this.src) {
					uni.$toast('请上传视频')
					return
				}
				if (!this.uploadQuery.cover_url) {
					return uni.$toast('请上传视频封面')
				}
				// if (!this.uploadQuery.group) {
				// 	uni.$toast('请选择视频合集')
				// 	return
				// }
				if (!this.uploadQuery.price && this.uploadQuery.price != 0) {
					uni.$toast('请设置价格')
					return
				}
				this.uploadQuery.is_try = this.uploadQuery.price == 0 ? 0 : 1
				uni.showModal({
					content: '是否确定上传视频',
					success: res => {
						if (res.confirm) {
							// console.log('this.uploadQuery, ', this.uploadQuery)
							let formData = {
								...this.uploadQuery
							}
							uni.showLoading({
								title: '上传中,请稍后'
							})
							uni.uploadFile({
								url: this.$http.getHost() + '/api/v1/author/shop-release',
								method: 'POST',
								header: {
									'X-Api-Key': uni.getStorageSync('acess_token'),
									"Content-Type": "multipart/form-data"
								},
								filePath: this.src,
								name: 'file',
								fileType: 'video',
								formData,
								timeout: 3600000,
								success: ress => {
									let result = JSON.parse(ress.data)
									// console.log('成功', result)
									if (result.code == 200) {
										uni.$toast('视频发布成功', true)
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 2000);
									} else uni.$toast('发布失败')
								},
								fail() {
									uni.$toast('发布失败')
								},
								complete() {
									uni.hideLoading()
								}
							})
						}
					}
				})


			},

		}
	}
</script>

<style lang="scss">
	// page {
	// 	width: 100vw;
	// 	height: 100vh;

	// }
	.uplaod-image {
		padding: 30rpx 32rpx;
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;

		.default-img {
			margin-top: 25rpx;
			width: 200rpx;
			height: 200rpx;
			padding: 40rpx;
			border: 1rpx solid #bfbfbf;
		}

		.collection-img {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.title-wrap {
		padding: 82rpx 32rpx;
		background-color: #FFFFFF;

		.confirm-btn {
			margin-top: 50rpx;
		}

		.fengmian-name {
			margin-top: 20rpx;
		}

		image {
			padding: 40rpx;
			border: 1rpx solid #bfbfbf;
			width: 200rpx;
			height: 200rpx;
			margin-top: 10rpx;
		}
	}

	.collection-list {

		overflow: auto;
		width: 100%;
		max-height: 900rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 14rpx 0px rgba(126, 151, 168, 0.24);
		padding: 90rpx 20rpx 40rpx;
		border-radius: 40rpx 30rpx 0px 0px;

		.title-box {
			padding-left: 40rpx;
			position: fixed;
			border-radius: 40rpx 30rpx 0px 0px;
			top: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.line {
				width: 4rpx;
				height: 18rpx;
				background: #BA2729;
				border-radius: 2rpx;
				margin-left: 5rpx;
				margin-right: 10rpx;
			}

			.count {
				font-size: 30rpx;
				color: #4D4D4D;
			}
		}

		.collection-group {
			@include flex-between();
			flex-wrap: wrap;
		}

		.collection-item {
			@include flex-center();
			flex-direction: column;
			width: 48%;
			height: 300rpx;
			background: #EFEEF5;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.left-video {
				@include flex-center();
				position: relative;
				width: 240rpx;
				height: 198rpx;
				border-radius: 10rpx;
				margin-bottom: 15rpx;

				.num {
					@include flex-center(144rpx, 41rpx);
					position: absolute;
					top: 0;
					left: 0;
					z-index: 99;
					background: rgba($color: #000, $alpha: .5);
					border-radius: 8rpx 0px 41rpx 0px;
					font-size: 20rpx;
					color: #fff;
				}

				video,
				image {
					width: 100%;
					height: 100%;
				}
			}

			.right-content {
				@include over-ellip();
				max-width: 366rpx;

				.tip {
					font-size: 26rpx;
					color: #1A1A1A;
				}

				.test {
					@include more-over-ellip(2);
					margin-top: 25rpx;
					font-size: 24rpx;
					color: #4D4D4D;
				}
			}
		}

		.upload-item {
			background-color: #FFFFFF;
			border: 2rpx solid #eeeeee;
			padding: 80rpx;

			&>image {
				width: 100%;
				height: 100%;

			}
		}
	}

	.upload-viedo-container {
		border: 1rpx solid rgba($color: #000000, $alpha: 0);
		background-color: #F0EFF5;
		padding: 0 23rpx;
		width: 100%;
		height: 100vh;
	}

	.top-video-title-bar {
		position: relative;
		border: 1rpx solid rgba($color: #000000, $alpha: 0);
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		width: 100%;
		height: 245rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 25rpx 20rpx;

		.img-box {
			position: relative;
			@include flex-center(173rpx, 195rpx);
			// justify-content: flex-start;
			flex-direction: column;
			border: 1rpx solid #bfbfbf;
			margin-right: 20rpx;
			// padding-top: 20rpx;

			image {
				width: 40%;
				height: 40%;
			}

			.fengmian {
				@include flex-center(100%, 40rpx);
				position: absolute;
				bottom: 0;
				left: 0;
				color: #FFFFFF;
				background-color: rgba($color: #000000, $alpha: .5);
				font-size: 20rpx;
			}

			.upload-title {
				margin-bottom: 10rpx;
				font-size: 20rpx;
				color: #bfbfbf;
			}

			video {
				width: 100%;
				height: 100%;
			}
		}

		.right-title {
			margin-top: 62rpx;
			width: 400rpx;

			.title-input {
				border: none;

			}

			.line {
				width: 449rpx;
				height: 1rpx;
				background: #CCCCCC;
				opacity: 0.3;
				margin: 31rpx 0 21rpx 0;
			}

			.content {
				width: 100%;
				height: 150rpx;
			}

		}

		.count {
			position: absolute;
			right: 39rpx;
			bottom: 27rpx;
			color: #A6A6A6;
			font-size: 24rpx;
			z-index: 99;
		}
	}

	.upload-video-class {
		margin-top: 20rpx;
		padding: 30rpx 27rpx;
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		.video-class-one {
			display: flex;
			align-items: center;

			.img-box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.more-img {
					width: 14rpx;
					height: 24rpx;
				}
			}

			.collection-picker {
				width: 100%;




			}

			.icon1 {
				width: 25rpx;
				height: 25rpx;
				margin-right: 21rpx;
			}

			.tip {
				font-size: 30rpx;
				font-weight: bold;
				color: #404040;
			}
		}

		.class-tab-box {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			margin-bottom: 50rpx;

			.class-tab-item {
				@include flex-center(152rpx, 50rpx);
				background: rgba($color: #B91C27, $alpha: .1);
				border-radius: 25px;
				color: #B91C27;
				font-size: 24rpx;
				margin: 18rpx;
			}

			.active {
				background: #B91C27;
				color: #FFFFFF;
			}
		}

		.line {
			width: 95%;
			margin-top: 29rpx;
			height: 1rpx;
			background: #CCCCCC;
			opacity: 0.3;
		}

		.video-class-two {
			margin-top: 60rpx;

			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			.img-box {
				position: relative;
				@include flex-center(173rpx, 195rpx);
				// justify-content: flex-start;
				flex-direction: column;
				border: 1rpx solid #bfbfbf;
				margin-right: 20rpx;
				// padding-top: 20rpx;

				image {
					width: 40%;
					height: 40%;
				}

				.uploaded-img {
					width: 100%;
					// height: 100%;
				}

				.fengmian {
					@include flex-center(100%, 40rpx);
					position: absolute;
					bottom: 0;
					left: 0;
					color: #FFFFFF;
					background-color: rgba($color: #000000, $alpha: .5);
					font-size: 20rpx;
				}

				.upload-title {
					margin-bottom: 10rpx;
					font-size: 20rpx;
					color: #bfbfbf;
				}

				video {
					width: 100%;
					height: 100%;
				}
			}

			.upload-image {
				width: 200rpx;

				&>image {
					width: 100%;
				}
			}

			.left-icon {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.icon1 {
					width: 25rpx;
					height: 25rpx;
					margin-right: 21rpx;
				}

				.tip {
					font-size: 30rpx;
					font-weight: bold;
					color: #404040;
				}
			}
		}

		.price-setting {
			margin-top: 60rpx;

		}

		.price-setting-box {
			padding: 0 83rpx 0 56rpx;
			margin-top: 25rpx;
			@include flex-between();
			flex-wrap: wrap;

			.price-item {
				font-size: 32rpx;
				color: #4D4D4D;
				padding: 14rpx 37rpx;
				background: #F0EFF5;
				border-radius: 26rpx;
			}
		}

		.price {
			margin-left: 57rpx;
			margin-top: 38rpx;
			margin-bottom: 30rpx;
			width: 190rpx;
			height: 52rpx;
			background: #F0EFF5;
			border-radius: 26rpx;
			padding-left: 15rpx;
		}
	}

	.confirm-btn {
		@include flex-center(605rpx, 75rpx);
		background: #B91C27;
		border-radius: 38rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 43rpx auto;
	}
</style>
